<template>
  <div class="productList" :class="type == '1' ? 'productList1' :'productList2'" ref="setHeight">
    <scroller :on-infinite="infinite" :on-refresh="refresh" 　　 ref="my_scroller">
      <div class="list acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
        <div
          @click="goDetail(item)"
          v-for="(item, index) in productList"
          :key="index"
          class="item"
          :class="Switch === true ? '' : 'on'"
          :title="item.store_name"
        >
          <div class="pictrue" :class="Switch === true ? '' : 'on'">
            <!-- 0元购icon -->
            <!-- <img class='freeBay' :class="Switch === true ? '' : 'on'" src="@assets/images/freeBay.png" alt=""> -->
            <img
              v-if="item.is_seckill=='1'"
              :src="item.seckill.image"
              :class="Switch === true ? '' : 'on'"
            >
            <img v-if="item.is_seckill=='0'" :src="item.image" :class="Switch === true ? '' : 'on'">
            <span
              class="pictrue_log_class"
              :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
              v-if="item.activity && item.activity.type === '1'"
            >秒杀</span>
            <span
              class="pictrue_log_class"
              :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
              v-if="item.activity && item.activity.type === '2'"
            >砍价</span>
            <span
              class="pictrue_log_class"
              :class="Switch === true ? 'pictrue_log_big' : 'pictrue_log'"
              v-if="item.activity && item.activity.type === '3'"
            >拼团</span>
            <span
              style="width:1.48rem;height:0.48rem;position: absolute;right:0;top:0;"
              v-show="item.is_seckill=='1'"
              class="free_buy"
            >
              <img style="border-radius:0;" src="@assets/images/seckill.png" alt>
            </span>
            <span
              style="width:1.08rem;height:0.48rem;position: absolute;right:0;top:0;"
              v-show="item.is_free=='1'"
              class="free_buy"
            >
              <img style="border-radius:0;" src="@assets/images/freeBay.png" alt>
            </span>
          </div>
          <div class="text" :class="Switch === true ? '' : 'on'">
            <div v-if="item.is_seckill == '1'" class="name line1" style="height:0.72rem;">
              <!-- <span  style="padding: 0.02rem 0.06rem;border-radius: 0.04rem;margin-right: 0.08rem;height: auto;border: 0.02rem solid rgba(255,35,35,0.38);font-size: 0.24rem;font-weight: 400;color: rgba(255,35,35,0.78);line-height: 1;">{{item.seckill.countTime}}</span> -->
              {{ item.seckill.title }}
            </div>
            <div
              v-if="item.is_seckill == '0'"
              class="name line1"
              style="height:0.72rem;"
            >{{ item.store_name }}</div>
            <!-- <div
              class="money font-color-red"
              :class="Switch === true ? '' : 'on'"
            >
              ￥<span class="num">{{ item.price }}</span>
            </div>-->
            <div class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
              <div
                class="vip-money font-color-red"
                v-show="item.is_free == '0' && item.is_seckill == '0'"
              >
                ￥
                <span style="font-size:0.3rem;">
                  {{
                  item.price.split(".")[0]
                  }}
                </span>
                .{{ item.price.split(".")[1] }}
              </div>
              <div class="vip-money font-color-red" v-if="item.is_seckill == '1'">
                ￥
                <span style="font-size:0.3rem;">
                  {{
                  item.seckill.price.split(".")[0]
                  }}
                </span>
                .{{ item.seckill.price.split(".")[1] }}
              </div>

              <div
                class="vip-money font-color-red"
                v-show="item.is_free == '1'&& item.is_seckill == '0'"
              >
                ￥
                <span style="font-size:0.3rem;">0</span>.00
              </div>
              <!-- <div class="flexDiv" v-show="item.is_free == '0'">
                <img src="@assets/images/havemoney.png" alt="">
                <span>￥{{item.brokerage}}</span>
              </div>-->
              <div
                v-if="item.sales == undefined && item.ficti == undefined && item.is_seckill == '0'"
              >已售0{{ item.unit_name }}</div>
              <div
                v-if="item.sales != undefined && item.ficti != undefined && item.is_seckill == '0'"
              >已售{{ item.sales+item.ficti }}{{ item.unit_name }}</div>
              <div
                v-if="item.sales != undefined && item.ficti == undefined && item.is_seckill == '0'"
              >已售{{ item.sales}}{{ item.unit_name }}</div>
              <div
                v-if="item.sales == undefined && item.ficti != undefined && item.is_seckill == '0'"
              >已售{{ item.ficti }}{{ item.unit_name }}</div>
              <div
                v-if="item.seckill.sales == undefined && item.ficti == undefined && item.is_seckill == '1'"
              >已售0{{ item.seckill.unit_name }}</div>
              <div
                v-if="item.seckill.sales != undefined && item.ficti != undefined && item.is_seckill == '1'"
              >已售{{ item.seckill.sales+item.ficti }}{{ item.seckill.unit_name }}</div>
              <div
                v-if="item.seckill.sales != undefined && item.ficti == undefined && item.is_seckill == '1'"
              >已售{{ item.seckill.sales}}{{ item.seckill.unit_name }}</div>
              <div
                v-if="item.seckill.sales == undefined && item.ficti != undefined && item.is_seckill == '1'"
              >已售{{ item.ficti }}{{ item.seckill.unit_name }}</div>
              <!-- <span class="num" >已售</span>
              <span class="num" >已售</span>-->
            </div>
          </div>
        </div>
      </div>
    </scroller>
    <!-- <Loading :loaded="loadend" :loading="loading" style="opacity:0;"></Loading> -->
    <!-- <div
      class="noCommodity"
      v-cloak
      style="background-color: #fff;"
      v-if="productList.length === 0 && where.page >= 1"
    >
      <div class="noPictrue">
        <img src="@assets/images/noGood.png" class="image" />
        <p class="txt">暂无商品,去看点别的吧</p>
      </div>
    </div>-->
    <!-- <div class="zanwei"  v-if="productList.length === 0 && where.page >= 1 && canSCroll == true"></div> -->
    <div class="noCart" v-if="productList.length === 0 && where.page >= 1 && canSCroll == true">
      <div class="pictrue">
        <img src="@assets/images/noOrder.png">
      </div>
      <p class="txt">还没有关注,赶快去关注一波吧~</p>
    </div>
    <!-- <Recommend v-if="productList.length === 0 && where.page > 1"></Recommend> -->
  </div>
</template>

<script>
// import Recommend from "@components/Recommend";
import { getProducts } from "@api/store";
import { getCollectUser } from "@api/user";
import debounce from "lodash.debounce";
import Loading from "@components/Loading";
import { goShopDetail } from "@libs/order";
import Swiper from "swiper";
import { connect } from "tls";

export default {
  name: "newGoodsList",
  components: {
    // Recommend,
    Loading
  },
  props: { type: String },
  data: function() {
    const { s = "", id = 0, title = "" } = this.$route.query;

    return {
      hostProduct: [],
      productList: [],
      Switch: true,
      where: {
        page: 1
      },
      title: title && id ? title : "",
      loadTitle: "",
      loading: false,
      loadend: false,
      price: 0,
      stock: 0,
      nows: false,
      bannerType: "1",
      broadcasts: "1",
      rollList: [
        "http://img001.cbct.cn/image/kgljm3mhm34848o00w.jpg",
        "http://img001.cbct.cn/image/kgl4qs8hgwgcogcs4o.jpg"
      ],
      noDate: false, //重置数据判断
      canSCroll: false,
      countTimetimer: "",
      listLength: 0
      // height:'',
    };
  },
  watch: {
    $route(to) {
      // if (to.name !== "GoodsList") return;
      // const { s = "", id = 0, title = "" } = to.query;
      // if (s !== this.where.keyword || id !== this.where.sid) {
      //   this.where.keyword = s;
      //   this.loadend = false;
      //   this.loading = false;
      //   this.where.page = 1;
      //   this.where.sid = id;
      //   this.title = title && id ? title : "";
      //   this.nows = false;
      //   this.$set(this, "productList", []);
      //   this.price = 0;
      //   this.stock = 0;
      //   this.get_product_list();
      // }
      // if (to.name !== "collection")
      // this.get_product_list();
    }
  },

  mounted: function() {
    var that = this;
    setTimeout(function() {
      that.get_product_list();
    }, 1000);

    // this.$scroll(this.$refs.container, () => {
    //   !this.loading && this.get_product_list();
    // });
  },
  created: function() {
    console.log(this.type);
    if (this.type == "1") {
    } else if (this.type == "2") {
    }
  },
  methods: {
    // 商品详情跳转
    goDetail(item) {
      if (this.type == "1") {
        goShopDetail(item).then(() => {
          this.$router.push({
            path: "/detail/" + item.id + "?mer_id=" + item.mer_id
          });
        });
      } else if (this.type == "2") {
        goShopDetail(item).then(() => {
          this.$router.push({
            path: "/detail/" + item.pid + "?mer_id=" + item.mer_id
          });
        });
      }
    },
    get_product_list: debounce(function() {
      var that = this;
      //隐藏 if (that.loading) return; //阻止下次请求（false可以进行请求）；
      // if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      // that.loading = true;
      this.setWhere();
      let q = that.where;
      let id = that.$route.query.id;
      if (this.type == "1") {
        getProducts(id, q).then(res => {
          // that.loading = false;
          that.$refs.my_scroller.finishPullToRefresh();
          let d = res.data.list;
          var length = 0;
          if (d.length == length) {
            that.noDate = true;
          } else if (that.where.page == 1) {
            // that.canSCroll = true;
            this.productList = res.data.list;
          } else {
            let videoList1 = res.data.list;
            that.productList = that.productList.concat(videoList1);
          }
        });
        //隐藏 getProducts(id, q).then(res => {
        //   this.$refs.my_scroller.finishPullToRefresh();
        //   // that.loading = false;
        //   that.productList.push.apply(that.productList, res.data.list);
        //   // that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
        //   // if(res.data.list.length==0){
        //   //   this.noDate = true;
        //   // }
        //   that.where.page = that.where.page + 1;
        //   that.$refs.my_scroller.finishPullToRefresh();
        // });
      } else if (this.type == "2") {
        getCollectUser(that.where.page, 10).then(res => {
          // 隐藏 that.loading = false;
          //apply();js将一个数组插入另一个数组;
          // that.productList.push.apply(that.productList, res.data);
          // that.loadend = res.data.length < 10; //判断所有数据是否加载完成；
          // that.where.page = that.where.page + 1;
          that.$refs.my_scroller.finishPullToRefresh();
          let d = res.data;
          var length = 0;
          if (d.length == length) {
            that.noDate = true;
            that.canSCroll = true;
          } else if (that.where.page == 1) {
            that.canSCroll = true;
            that.productList = res.data;
          } else {
            let videoList1 = res.data;
            that.productList = that.productList.concat(videoList1);
          }
          this.countTimeFunction();
        });
      }
    }, 300),
    countTimeFunction() {
      var self = this;
      if (self.countTimetimer != "") {
        clearInterval(self.countTimetimer);
      }
      self.countTimetimer = setInterval(function() {
        self.listLength = 0;
        self.productList.forEach((value, index) => {
          if (value.is_seckill == "1") {
            var timeDom = "";
            var date = new Date();
            var now = parseInt(date.getTime() / 1000);
            var differTime = value.seckill.stop_time - now;
            console.log(differTime);
            // console.log(now);
            var h, m, s;
            if (differTime >= 0) {
              h = Math.floor(differTime / 60 / 60);
              m = Math.floor((differTime / 60) % 60);
              s = Math.floor(differTime % 60);
              h = h < 10 ? "0" + h : h;
              m = m < 10 ? "0" + m : m;
              s = s < 10 ? "0" + s : s;
              timeDom = h + ":" + m + ":" + s;
            } else {
              value.is_seckill = "0";
              timeDom = "";
            }
            self.$set(value.seckill, "countTime", timeDom);
          } else {
            self.listLength++;
          }
        });
        if (self.listLength == self.productList.length) {
          clearInterval(self.countTimetimer);
        }
      }, 1000);
    },
    submitForm: function() {
      this.$set(this, "productList", []);
      this.where.page = 1;
      this.loadend = false;
      this.loading = false;
      this.get_product_list();
    },
    //点击事件处理
    set_where: function(index) {
      let that = this;
      switch (index) {
        case 0:
          return that.$router.push({ path: "/category" });
        case 1:
          if (that.price === 0) that.price = 1;
          else if (that.price === 1) that.price = 2;
          else if (that.price === 2) that.price = 0;
          that.stock = 0;
          break;
        case 2:
          if (that.stock === 0) that.stock = 1;
          else if (that.stock === 1) that.stock = 2;
          else if (that.stock === 2) that.stock = 0;
          that.price = 0;
          break;
        case 3:
          that.nows = !that.nows;
          break;
        default:
          break;
      }
      that.$set(that, "productList", []);
      that.where.page = 1;
      that.loadend = false;
      that.get_product_list();
    },
    //设置where条件
    setWhere: function() {
      // let that = this;
      // if (that.price === 0) {
      //   that.where.priceOrder = "";
      // } else if (that.price === 1) {
      //   that.where.priceOrder = "asc";
      // } else if (that.price === 2) {
      //   that.where.priceOrder = "desc";
      // }
      // if (that.stock === 0) {
      //   that.where.salesOrder = "";
      // } else if (that.stock === 1) {
      //   that.where.salesOrder = "asc";
      // } else if (that.stock === 2) {
      //   that.where.salesOrder = "desc";
      // }
      // that.where.news = that.nows ? "1" : "0";
    },
    switchTap: function() {
      let that = this;
      that.Switch = !that.Switch;
    },
    infinite(done) {
      var self = this;
      setTimeout(function() {
        var timer1 = setInterval(function() {
          console.log(self.canSCroll);
          if (!self.canSCroll) {
            //  clearInterval(timer1)
          } else {
            if (self.noDate) {
              self.$refs.my_scroller.finishInfinite(2); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              setTimeout(() => {
                self.where.page++; //下拉一次页数+1
                self.get_product_list();
                done(); //进行下一次加载操作
              }, 500);
            }
            clearInterval(timer1);
          }
        }, 100);
      }, 200);
    },
    refresh() {
      this.where.page = 1; //重置页数刷新每次页数都是第一页
      this.noDate = false; //重置数据判断
      setTimeout(
        function() {
          this.get_product_list();
          this.$refs.my_scroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
        }.bind(this),
        700
      );
    }
  }
};
</script>
<style scoped>
.productList1 {
  position: absolute;
  width: 100%;
  top: 5rem;
  bottom: 0;
}
.productList .list .item .pictrue .freeBay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.54rem;
}
.productList2 {
  position: absolute;
  width: 100%;
  top: 0.8rem;
  bottom: 0;
}
.noCommodity {
  border-top: 3px solid #f5f5f5;
  padding-bottom: 1px;
}
.noPictrue img {
  width: 4rem;
  margin: 0 auto;
  display: block;
}

.noPictrue .txt {
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  letter-spacing: 0.01rem;
}
/* .zanwei{
  position: fixed;
  top: 0.8rem;
  left: 0;
  width: 100%;
  height:1rem ;
  background:  rgb(245, 245, 245);
} */
.noCart {
  /* margin-top: 0.17rem;
  padding-top: 0.1rem; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  background: rgb(245, 245, 245);
}

.noCart .pictrue {
  width: 4rem;
  height: 3rem;
  margin: 40% auto 0.5rem auto;
}

.noCart .pictrue img {
  width: 100%;
  height: 100%;
}
.noCart .txt {
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  letter-spacing: 0.01rem;
}
</style>
